<template>
  <div class="app">
    <div>
      <div class="header-section">
        <h1 class="title">全局设置</h1>
        <hr class="divider" />
      </div>

      <div class="content-section">
        <div class="blue-bar"></div>
        <div>
          <div class="settings-label">
            <span>外呼设置</span>
          </div>
          <el-form class="settings-form" label-width="160px">
            <el-form-item label="每日取消重呼数据" prop="fmrqxchsj">
              <el-radio-group v-model="state.formData.fmrqxchsj">
                <el-radio :label="0" border style="margin-right: 10px">关闭</el-radio>
                <el-radio :label="1" border>开启</el-radio>
              </el-radio-group>
            </el-form-item>


            <el-form-item label="每日取消首呼数据" prop="fmrqxshsj">
              <el-radio-group v-model="state.formData.fmrqxshsj">
                <el-radio :label="0" border style="margin-right: 10px">关闭</el-radio>
                <el-radio :label="1" border>开启</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="自动添加黑名单" prop="fzdtjhmd">
              <el-radio-group v-model="state.formData.fzdtjhmd">
                <el-radio :label="0" border style="margin-right: 10px">关闭</el-radio>
                <el-radio :label="1" border>开启</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="转人工等待音" prop="fzrgddy">
              <el-upload action="#" accept=".wav" v-model="state.formData.fzrgddy">
                <el-button size="small" type="primary">上传</el-button>
              </el-upload>
            </el-form-item>

            <el-form-item label="人工外呼自动重复次数" prop="frgwhcfcs">
              <el-input-number :min="0" v-model="state.formData.frgwhcfcs"></el-input-number>
            </el-form-item>

            <el-form-item label="短信失败自动重发" prop="fdxsbzdcf">
              <el-radio-group v-model="state.formData.fdxsbzdcf">
                <el-radio :label="0" border style="margin-right: 10px">关闭</el-radio>
                <el-radio :label="1" border>开启</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>
        </div>
      </div>

      <div class="content-section">
        <div class="blue-bar"></div>
        <div>
          <div class="settings-label">
            <span>API设置</span>
          </div>
          <el-form class="settings-form" label-width="160px">

            <el-form-item label="对话过程回调地址" prop="fdhgcjk" style="display: flex; align-items: center;">
              <el-input v-model="state.formData.fdhgcjk" style="width: 490px"></el-input>
              <div style="margin-left: 20px;">
                <span style="margin-right: 10px;">是否加密</span>
                <el-radio-group v-model="state.formData.fdhgcjkjm">
                  <el-radio :label="0" border style="margin-right: 10px">否</el-radio>
                  <el-radio :label="1" border>是</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>

            <el-form-item prop="fwhgdjk" label="外呼挂断回调地址" style="display: flex; align-items: center;">
              <el-input v-model="state.formData.fwhgdjk" style="width: 490px"></el-input>
              <div style="margin-left: 20px;">
                <span style="margin-right: 10px;">是否加密</span>
                <el-radio-group v-model="state.formData.fwhgdjkjm">
                  <el-radio :label="0" border style="margin-right: 10px">否</el-radio>
                  <el-radio :label="1" border>是</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>


            <el-form-item prop="fgjdxjk" label="挂机短信回调地址" style="display: flex; align-items: center;">
              <el-input v-model="state.formData.fgjdxjk" style="width: 490px"></el-input>
              <div style="margin-left: 20px;">
                <span style="margin-right: 10px;">是否加密</span>
                <el-radio-group v-model="state.formData.fgjdxjkjm">
                  <el-radio :label="0" border style="margin-right: 10px">否</el-radio>
                  <el-radio :label="1" border>是</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>


            <el-form-item prop="fqfdxjk" label="群发短信回调地址" style="display: flex; align-items: center;">
              <el-input v-model="state.formData.fqfdxjk" style="width: 490px"></el-input>
              <div style="margin-left: 20px;">
                <span style="margin-right: 10px;">是否加密</span>
                <el-radio-group v-model="state.formData.fqfdxjkjm">
                  <el-radio :label="0" border style="margin-right: 10px">否</el-radio>
                  <el-radio :label="1" border>是</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>


            <el-form-item prop="fzhcxjk" label="转化查询地址" style="display: flex; align-items: center;">
              <el-input v-model="state.formData.fzhcxjk" style="width: 200px"></el-input>
              <div style="margin-left: 20px;">
                <span style="margin-right: 10px;">是否加密</span>
                <el-radio-group v-model="state.formData.fzhcxjkjm">
                  <el-radio :label="0" border style="margin-right: 10px">否</el-radio>
                  <el-radio :label="1" border>是</el-radio>
                </el-radio-group>
              </div>
<!--              <div style="margin-left: 20px;">-->
<!--                <span style="margin-right: 10px;">查询转化字段</span>-->
<!--                <el-radio-group v-model="state.formData.fcxzhzd">-->
<!--                  <el-radio :label="0" border style="margin-right: 10px">Number</el-radio>-->
<!--                  <el-radio :label="1" border>Tag</el-radio>-->
<!--                </el-radio-group>-->
<!--              </div>-->
            </el-form-item>

            <el-form-item prop="ffjztjk" label="分机状态回调地址">
              <el-input v-model="state.formData.ffjztjk" style="width: 713px"></el-input>
            </el-form-item>

            <el-form-item prop="fzxtcjk" label="坐席弹窗回调地址">
              <el-input v-model="state.formData.fzxtcjk" style="width: 713px"></el-input>
            </el-form-item>

            <el-form-item prop="ftpjk" label="弹屏地址(iFrame)">
              <el-input v-model="state.formData.ftpjk" style="width: 713px"></el-input>
            </el-form-item>

            <el-form-item prop="fhmzhjk" label="号码转换接口">
              <el-input v-model="state.formData.fhmzhjk" style="width: 713px"></el-input>
            </el-form-item>

          </el-form>

          <el-button type="primary" style="margin-left: 160px" @click="submit">
            保存设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>

import {onMounted, reactive,ref} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {useAccount} from "@/pinia/modules/account";

const state = reactive({
  formData : {
    fgsid: null,
    fmrqxchsj: 0,
    fmrqxshsj: 0,
    fzdtjhmd: 0,
    fzrgddy: null,
    frgwhcfcs: 0,
    fdxsbzdcf: 0,
    fdhgcjk: null,
    fdhgcjkjm: 0,
    fwhgdjk: null,
    fwhgdjkjm: 0,
    fgjdxjk: null,
    fgjdxjkjm: 0,
    fqfdxjk: null,
    fqfdxjkjm: 0,
    fzhcxjk: null,
    fzhcxjkjm: 0,
    ffjztjk: null,
    fzxtcjk: null,
    ftpjk: null,
    fhmzhjk: null,
    // fcxzhzd:0
  },
  userinfo : null
})

// let userString = localStorage.getItem('user');
// let user = JSON.parse(userString);

const account = useAccount()
let fgsid = account.userinfo.gsId

const load =() => {
  console.log(account.userinfo)
  request.get('/globalsetting/find/'+fgsid).then(res=>{
    if(res.data !== null)
    {
      state.formData = res.data
    }
  })
}

onMounted(() => {
  load();
});


const submit =() => {
  request.post(`/globalsetting/save/${fgsid}`,state.formData).then(res=>{
      ElMessage.success('保存成功')
  }).catch(error => {
    console.log(error)
    ElMessage('保存失败')
  })
}


</script>


<style>
.header-section {
  padding: 5px;
}

.title {
  font-weight: bold;
  font-size: 20px;
}

.divider {
  width: 100%;
  border-top: 0.5px solid #e6dfdf;
}

.content-section {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.blue-bar {
  width: 5px;
  height: 30px;
  background-color: #0080ff;
  border-radius: 5px;
  margin-right: 10px;
}

.settings-label {
  font-size: 18px;
}

.settings-form {
  margin-top: 10px;
}

</style>